

<template >

<el-container class="back">
 
  <el-main>

      <div >
        

             <div  class="login-box">
                <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                    <h3>欢迎注册</h3>
                    <el-form-item label="账号" prop="phone">
                    <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码" prop="mesCode">
                    <el-input class="mesCode" v-model="form.mesCode" placeholder="短信验证码"></el-input>
                    <el-button type="primary" @click="getMesCode()" >点击获取验证码</el-button>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item label="用户名" prop="name">
                    <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="sex">
                    <el-input v-model="form.sex" placeholder="请输入性别"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄" prop="age">
                    <el-input v-model="form.age" placeholder="请输入年龄"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                    <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
                    </el-form-item>
                    <el-form-item>
                    <el-button type="primary" @click="onRegist('form')">注册</el-button>
                    </el-form-item>
                </el-form>
             </div>

      
       
           
    </div>
    
  </el-main>
</el-container>


    

 
  
 </template>

<script>
export default {
    name: "Login",
    data(){
      return{
        form:{
          name:'',
          password:'',
          checkCode: '',
          mesCode: '',
          phone: '',
          sex: '',
          age: '',
          email: '',
          
        },
        rules:{
          password:[
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
          ]
        },
        checked: false,
        src: '',
        imgSrc: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      }

    },
    methods:{
      onRegist(formName){
        this.$refs[formName].validate((valid) => {
          var vm = this;
          if (valid) {
              if( vm.form.sex==="男"){
                  vm.form.sex = 1
              }else if(vm.form.sex==="女"){
                  vm.form.sex = 2
              }else{
                  vm.form.sex = 0
              }
             
            // 发送axios请求
            this.axios({
              method:'post',
              url:'http://localhost:9000/login/doRegist?',
              data:{
              
                name:vm.form.name,
                password:vm.form.password,
                phone:vm.form.phone,
                sex:vm.form.sex,
                email:vm.form.email,
                phone:vm.form.phone,
                age:vm.form.age,
                mesCode:vm.form.mesCode,
              }
            }).then(function(resp){
            //   console.log(resp)
              if(resp.data.errno==0){

                vm.$message({
                  message: '注册成功',
                  type: 'success'
                });
                setTimeout(function(){
                  vm.$router.push("/Login")
                },2000)
              }else{
                vm.$message.error(resp.data.data);
              }
            })

          } else {
            this.$message.error('用户名或密码格式错误');
            return false;
          }
        });
      },
      getMesCode(){
          alert("已调用获取短信验证码方法")
         var vr = this;
         // 发送axios请求
            this.axios({
              method:'get',
              url:'http://localhost:9000/login/getMesCode?',
          
            }).then(function(resp){
              console.log(resp)
              if(resp.data.errno==0){
                console.log("获取短信验证码成功")
              vr.src = resp.data.data;
                console.log(vr.src)

              }else{
                console.log("获取短信验证码失败")
                vr.$message.error('获取短信验证码失败');
              }
            })
      },
  
      getCheckBoxStatus(){
          //  alert("是否勾选:"+this.checked) 
      }
    },
      //生命周期-挂载完成（可以访问DOM 元素）
  mounted() {

    
    
  }
}
</script>

<style scoped>
  .login-box{
    width: 500px;
    height: 550px;
    border: 1px solid #DCDFE6;
    margin: 50px auto;
    padding: 20px 50px 20px 30px;
    border-radius: 20px;
    box-shadow: 0px 0px 20px #DCDFE6;
    background-color: antiquewhite;
  }
.mesCode{
  width: 275px;
  margin-left: -4px;
}
.code{
  width: 150px;
  margin-top: -150px;
  margin-left: -70px;
}
.back{
    background-color: rgb(212, 185, 201);
    width: 100%;
    height: 100%;
}
</style>
